<template>
  <div>
    <div class="sec sec1">
      <div class="title">
        <p>实时数据</p>
        <div class="serbox">
          <el-select v-model="type"
                     style="margin-right:10px"
                     @change="chochange(0)">
            <el-option label="按金额查询"
                       value="0"></el-option>
            <el-option label="按数量查询"
                       value="1"></el-option>
          </el-select>
          <el-select v-model="classfy"
                     placeholder="请选择分类"
                     clearable>
            <el-option v-for="item in classfyList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
          <el-date-picker v-model="choDate"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          style="margin:0 10px"
                          :picker-options="pickerOptions"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-button type="primary"
                     style="margin-left:15px"
                     size="medium"
                     @click="chochange">查询</el-button>
        </div>
      </div>
      <div class="echart"
           ref="myChart"></div>
    </div>
    <div class="sec sec2">
      <div class="title">明细详情</div>
      <div class="table">
        <el-table :data="tableData"
                  stripe
                  style="width: 100%">
          <el-table-column prop="goodsName"
                           label="商品名称">
          </el-table-column>
          <el-table-column prop="price"
                           label="商品单价">
          </el-table-column>
          <el-table-column prop="total"
                           label="购买数量">
          </el-table-column>
          <el-table-column prop="payment"
                           label="收入">
          </el-table-column>
          <el-table-column prop="payAt"
                           label="日期">
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination background
                       @current-change="changePage"
                       :current-page.sync="page"
                       :page-size="pageSize"
                       layout="total,prev,pager,next,jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from "echarts";
export default {
  data () {
    return {
      myChart: {},
      type: "0",
      classfyList: [],
      classfy: "",
      choDate: ["", ""],
      pickerOptions: {
        // 设置不能选择的日期
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate0 = minDate.getTime();
          if (maxDate) {
            this.choiceDate0 = '';
          }
        },
        disabledDate:
          (time) => {
            let choiceDateTime = new Date(this.choiceDate0).getTime();
            const minTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() - 1);
            const maxTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() + 1);
            const min = minTime;
            const newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
            const max = newDate < maxTime ? newDate : maxTime;
            //如果已经选中一个日期 则 返回 该日期前后一个月时间可选
            if (this.choiceDate0) {
              return time.getTime() < min || time.getTime() > max;
            }
            //若一个日期也没选中 则 返回 当前日期以前日期可选
            return time.getTime() > newDate;
          }
      },
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      nametext: "金额",
      echartsDate: {
        dayList: [],
        numList: []
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.loadEchart();
    })
  },
  mounted () {
    const that = this;
    window.onresize = function () {
      that.myChart.resize();
    }
    this.getclass();
    this.getechartDate();
    this.gettablelist();
  },
  watch: {
    echartsDate: {
      handler: function () {
        this.$nextTick(() => {
          if (this.echartsDate) {
            this.loadEchart();
          }
        })
      },
      deep: true
    }
  },
  methods: {
    // 获取分类列表
    getclass () {
      this.$getRequest("/mall/goodsClass/getAll", {}).then(res => {
        this.classfyList = res.data;
      })
    },
    // 获取折线图数据
    getechartDate () {
      this.$postRequest("/mall/orderOrder/count/info", {
        shopId: sessionStorage.getItem("shopId"),
        classId: this.classfy,
        beginAt: this.choDate[0],
        endAt: this.choDate[1]
      }).then(res => {
        this.echartsDate.dayList = res.data.dayList;
        if (this.type == "0") {
          this.echartsDate.numList = res.data.moneyList;
        } else if (this.type == "1") {
          this.echartsDate.numList = res.data.numList;
        }
      })
    },
    loadEchart () {
      this.myChart = Echarts.init(this.$refs.myChart);
      const that = this;
      this.myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: true,
          icon: "rect",
          data: [{
            name: '收入',
          }],
          right: 10,
          top: 10
        },
        xAxis: {
          name: "日期",
          type: 'category',
          boundaryGap: false,
          data: that.echartsDate.dayList
        },
        yAxis: {
          name: that.nametext,
          type: 'value'
        },
        series: [{
          name: "收入",
          data: that.echartsDate.numList,
          type: 'line',
          symbol: "circle",
          symbolSize: 6,
          itemStyle: {
            color: "#FF8812"
          },
          areaStyle: {
            color: "rgba(225,136,18,0.1)"
          }
        }]
      })
    },
    gettablelist () {
      this.$postRequest("/mall/orderOrder/count/list", {
        shopId: sessionStorage.getItem("shopId"),
        classId: this.classfy,
        beginAt: this.choDate[0],
        endAt: this.choDate[1],
        pageNum: this.page,
        pageSize: this.pageSize
      }).then(res => {
        this.total = res.total;
        for (var i = 0; i < res.rows.length; i++) {
          res.rows[i].payAt = this.$util.gettime(new Date(res.rows[i].payAt));
        }
        this.tableData = res.rows;
      })
    },
    changePage (val) {
      this.gettablelist();
    },
    chochange (e) {
      // 修改Y轴名称
      if (e == 0) {
        if (this.type == 0) {
          this.nametext = "金额"
        } else if (this.type == 1) {
          this.nametext = "数量"
        }
      }
      if (this.choDate == null) {
        this.choDate = ["", ""];
      }
      this.getechartDate();
      this.page = 1;
      this.gettablelist();
    },
  }
}
</script>

<style lang="scss" scoped>
.sec {
  background: #fff;
  margin: 20px;
  .title {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
  }
  .echart {
    height: 460px;
  }
}
.table {
  border: 1px solid #eee;
  margin: 20px;
}
/deep/ .el-table th > .cell,
/deep/ .el-table .cell {
  text-align: center;
}
.page {
  padding: 20px;
  text-align: right;
}
</style>